{% extends 'marketing/base.html' %}
{% load static %}
{% load paginate %}
{% block content %}
{{ block.super }}

<div class="main_container">
  
  <div class="row marl">
    <div class="col-lg-12 text-right">
      <span class="d-inline">
        <a href="{% url 'marketing:contact_list_new' %}" class="primary_btn">Add New Contact List</a>
      </span>
    </div>
  </div>
  <div class="filter_row list_filter_row row marl">
    <div class="col-md-12">
      <div class="card">
        <div class="card-body">
          <form id="leads_filter" action="" method="POST">
            <div class="card-body ">
              <div class="card-title">Filters</div>
              <div class="row marl">
                
                <div class="filter_col col-md-2">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Email</label>
                    <input type="text" class="form-control" placeholder="Email" name="email"
                      value="{{request.POST.email}}">
                  </div>
                </div>
                
                <div class="filter_col col-md-3">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Created By</label>
                    <select name="created_by" id="created_by" class="assigned_users_ form-control">
                      <option value="">
                        ------------------</option>
                      {% for user in users %}
                      <option value="{{user.id}}" {% if user.id|slugify == request.POST.created_by %} selected=""
                        {% endif %}>
                        {{user.email}}</option>
                      {% endfor %}
                    </select>
                  </div>
                </div>
                <div class="filter_col col-md-3">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Contact List</label>
                    <select name="contact_list" id="id_contact_list" class="class_contact_list_ form-control">
                      <option value="">
                        ------------------</option>
                      {% for contact_list in contact_lists %}
                      <option value="{{contact_list.id}}" {% if contact_list.id|slugify == request.POST.contact_list %}
                        selected="" {% endif %}>
                        {{contact_list.name}}</option>
                      {% endfor %}
                    </select>
                  </div>
                </div>
                <input type="hidden" name="tab_status" id="tab_status">
                <div class="filter_col col-2">
                  <div class="form-group buttons_row">
                    <button class="btn btn-primary save" type="submit">Search</button>
                    <a href="" class="btn btn-default clear" onclick="window.location.reload">Clear</a>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  
  
  <div class="filter_row row marl">
    <div class="col-md-12 col-lg-12 col-xl-12">
      <div class="table_container_row row marl no-gutters">
        <div class="col-md-12">
          <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item">
              <a class="nav-link active" id="open-tab" data-toggle="tab" href="#open" role="tab" aria-controls="open"
                aria-selected="true">Contacts ({{contacts|length}})</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="close-tab" data-toggle="tab" href="#close" role="tab" aria-controls="close"
                aria-selected="false">Bounced ({{bounced_contacts|length}})</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="failed-contacts" data-toggle="tab" href="#failed_contacts" role="tab"
                aria-controls="close" aria-selected="false">Failed Contacts ({{failed_contacts|length}})</a>
            </li>
          </ul>
          <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="open" role="tabpanel" aria-labelledby="open">
              <div class="card">
                <div class="card-body">
                  <div class="panel-heading-list card-title text-right">
                    <span class="total_count float-left">Contacts - {% if show_pageitems %}
                      {% show_pageitems %}{% else %}{{contacts|length}}{% endif %}</span>
                    <span class="filter_toggle ">
                      <a href="#" class="primary_btn"><i class="fas fa-filter"></i></a>
                    </span>
                    
                  </div>
                  <div class="table-responsive table-bordered ">
                    <table class="table">
                      <thead>
                        <tr>
                          
                          <th width="5%">S. No</th>
                          <th width="10%">Name</th>
                          <th width="10%">Email</th>
                          <th width="15%">Company</th>
                          <th width="15%">Created by</th>
                          <th width="15%">Created On</th>
                          <th width="15%">Related Contact List</th>
                          <th width="10%">Actions</th>
                        </tr>
                      </thead>
                      <tbody>
                        {% if per_page %}
                        {% paginate per_page contacts %}
                        {% else%}
                        {% paginate 10 contacts %}
                        {% endif %}
                        {% for contact in contacts %}
                        <tr style="text-align:center;">
                          <td scope="row">{{ forloop.counter }}</td>
                          <td><a href="{% url 'marketing:contact_detail' contact.id %}">{{ contact.name }}</td>
                          <td class="text-center">{{ contact.email }}</td>
                          <td class="text-center">{{ contact.company_name }}</td>
                          <td>{{ contact.created_by }}</td>
                          <td title="{{contact.created_on}}">{{ contact.created_on_arrow }}</td>
                          <td>
                            {% for contact_list in contact.contact_list.all %}
                            <span> <a
                                href="{% url 'marketing:contact_list_detail' contact_list.id %}">{{contact_list.name}}</a>
                            </span>
                            {% empty %}
                            <span>None</span>
                            {% endfor %}
                          </td>
                          <td class="actions text-center">
                            
                            
                            <a href="{% url 'marketing:delete_contact' contact.id %}"
                              class="btn btn-danger delete remove_account"
                              data-other-contacts-lists='{{contact.contact_lists_count}}' title="Delete"><i
                                class="fas fa-trash-alt"></i></a>
                          </td>
                        </tr>

                        {% empty %}
                        <tr style="text-align:center;">
                          <td colspan="6">There are no records</td>
                        </tr>
                        {% endfor %}
                      </tbody>
                    </table>
                  </div>
                </div>
                <div class="text-center row marl mt-3">
                  {% show_pages %}
                </div>
              </div>
            </div>
            <div class="tab-pane fade" id="close" role="tabpanel" aria-labelledby="close">
              <div class="card">
                <div class="card-body">
                  <div class="panel-heading-list card-title text-right">
                    <span class="total_count float-left">Bounced Contacts - {{bounced_contacts|length}}</span>
                    <span class="filter_toggle ">
                      <a href="#" class="primary_btn"><i class="fas fa-filter"></i></a>
                    </span>
                    
                  </div>
                  <div class="table-responsive table-bordered ">
                    <table class="table">
                      <thead>
                        <tr>
                          <th width="5%">S. No</th>
                          <th width="10%">Name</th>
                          <th width="10%">Email</th>
                          <th width="15%">Company</th>
                          <th width="15%">Created by</th>
                          <th width="15%">Created On</th>
                          <th width="15%">Related Contact List</th>
                          <th width="10%">Actions</th>
                        </tr>
                      </thead>
                      <tbody>
                        {% if per_page %}
                        {% paginate per_page bounced_contacts %}
                        {% else%}
                        {% paginate 10 bounced_contacts %}
                        {% endif %}
                        {% for contact in bounced_contacts %}
                        <tr style="text-align:center;">
                          <td scope="row">{{ forloop.counter }}</td>
                          <td><a href="{% url 'marketing:contact_detail' contact.id %}">{{ contact.name }}</td>
                          <td class="text-center">{{ contact.email }}</td>
                          <td class="text-center">{{ contact.company_name }}</td>
                          <td>{{ contact.created_by }}</td>
                          <td title="{{contact.created_on}}">{{ contact.created_on_arrow }}</td>
                          <td>
                            {% for contact_list in contact.contact_lists %}
                            <span> <a
                                href="{% url 'marketing:contact_list_detail' contact_list.0 %}">{{contact_list.1}}</a>
                            </span>
                            {% empty %}
                            <span>None</span>
                            {% endfor %}
                          </td>
                          <td class="actions text-center">
                            
                            
                            <a href="{% url 'marketing:delete_contact' contact.id %}"
                              class="btn btn-danger delete remove_account"
                              data-other-contacts-lists='{{contact.contact_lists_count}}' title="Delete"><i
                                class="fas fa-trash-alt"></i></a>
                          </td>
                        </tr>

                        {% empty %}
                        <tr style="text-align:center;">
                          <td colspan="6">There are no records</td>
                        </tr>
                        {% endfor %}
                      </tbody>
                    </table>
                  </div>
                </div>
                <div class="text-center row marl mt-3">
                  <ul class="pagination">
                    {% show_pages %}
                  </ul>
                </div>
              </div>
            </div>
            <div class="tab-pane fade" id="failed_contacts" role="tabpanel" aria-labelledby="close">
              <div class="card">
                <div class="card-body">
                  <div class="panel-heading-list card-title text-right">
                    <span class="total_count float-left">Failed Contacts - {{failed_contacts|length}}</span>
                    <span class="filter_toggle ">
                      <a href="#" class="primary_btn"><i class="fas fa-filter"></i></a>
                    </span>
                    
                  </div>
                  <div class="table-responsive table-bordered ">
                    <table class="table">
                      <thead>
                        <tr>
                          <th width="5%">S. No</th>
                          <th width="10%">Name</th>
                          <th width="10%">Email</th>
                          <th width="15%">Company</th>
                          <th width="15%">Created by</th>
                          <th width="15%">Created On</th>
                          <th width="15%">Related Contact List</th>
                          <th width="10%">Actions</th>
                        </tr>
                      </thead>
                      <tbody>
                        {% if per_page %}
                        {% paginate per_page failed_contacts %}
                        {% else%}
                        {% paginate 10 failed_contacts %}
                        {% endif %}
                        {% for contact in failed_contacts %}
                        <tr style="text-align:center;">
                          <td scope="row">{{ forloop.counter }}</td>
                          <td><a href="{% url 'marketing:contact_detail' contact.id %}">{{ contact.name }}</td>
                          <td class="text-center">{{ contact.email }}</td>
                          <td class="text-center">{{ contact.company_name }}</td>
                          <td>{{ contact.created_by }}</td>
                          <td title="{{contact.created_on}}">{{ contact.created_on_arrow }}</td>
                          <td>
                            {% for contact_list in contact.contact_lists %}
                            <span> <a
                                href="{% url 'marketing:contact_list_detail' contact_list.0 %}">{{contact_list.1}}</a>
                            </span>
                            {% empty %}
                            <span>None</span>
                            {% endfor %}
                          </td>
                          <td class="actions text-center">
                            
                            
                            <a href="{% url 'marketing:delete_contact' contact.id %}"
                              class="btn btn-danger delete remove_account"
                              data-other-contacts-lists='{{contact.contact_lists_count}}' title="Delete"><i
                                class="fas fa-trash-alt"></i></a>
                          </td>
                        </tr>

                        {% empty %}
                        <tr style="text-align:center;">
                          <td colspan="6">There are no records</td>
                        </tr>
                        {% endfor %}
                      </tbody>
                    </table>
                  </div>
                </div>
                <div class="text-center row marl mt-3">
                  <ul class="pagination">
                    {% show_pages %}
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <br clear="all">
  </div>
</div>
</div>
</div>



</div>




{% endblock %}

{% block js_block %}
<script>
  $(function () {
    $(".filter_toggle").click(function () {
      $(".list_filter_row").toggle();
    });
    search = "{{search}}"
    if (search == 'True') {
    $(".list_filter_row").show();
    }

    $('#id_tag').select2();
    $('#delete_all').hide()
    $('#delete_all_bounced').hide()
    $('#delete_all_complete').hide()
    $('#delete_all_bounced_complete').hide()
    $('#delete_all_duplicate').hide()
    $('#delete_all_complete_duplicate').hide()

    $(".tag_class_cl").click(function () {
      // $(".tag_class_opp").css('cursor', 'pointer')
      url = "{% url 'marketing:contact_lists' %}"
      url = url + "?tag=" + $(this).attr('data-link')
      window.location.href = url;
    })

    $("#check_all").click(function () {
      $(".check_delete").prop('checked', $(this).prop('checked'))

      if ($('#check_all').prop('checked')) {
        $('#delete_all').show()
        $('#delete_all_complete').show()
      }
      else {
        $('#delete_all').hide()
        $('#delete_all_complete').hide()
      }
    });

    $('.check_delete').on('change', function () {
      // console.log('changed')
      if ($('.check_delete:checked').length > 1) {
        $('#delete_all').show()
      }
      else {
        $('#delete_all').hide()
      }
    })

    $('#delete_all_complete').click(function () {
      if (!confirm('Are you sure you want to delete all the {{contacts_list_count}} contacts ?')) {
        $('#check_all').prop('checked', false)
        $('.check_delete').prop('checked', false)
        $('#delete_all').hide()
        $('#delete_all_complete').hide()
        return;
      }
      {% comment %}
      window.location.href = "{% url 'marketing:delete_all_contacts' contact.id %}"
      {% endcomment %}

    })

    $('#delete_all').click(function (e) {
      e.preventDefault()
      if (!confirm('Are you sure you want to delete the selected contacts ?')) {
        $('#check_all').prop('checked', false)
        $('.check_delete').prop('checked', false)
        $('#delete_all').hide()
        $('#delete_all_complete').hide()
        return;
      }
      $('#delete_all').attr('disabled', 'disabled')
      var selected = [];
      $('.check_delete:checked').each(function () {
        selected.push($(this).attr('value'));
        // console.log(selected)
      });
      console.log(selected)
      $.ajax({
        url: "{% url 'marketing:delete_multiple_contacts' %}",
        type: 'POST',
        data: {
          'selected_list': selected,
          'from_contact': "{{contact_list.id}}",
        },
        success: function (data) {
          console.log(data)
          if (data['error'] === false) {
            window.location.reload()
          }
          else {
            $('#delete_all').removeAttr('disabled', 'disabled')
            alert(data['message'])
          }
        },
      });
    })

    // for bounced

    $("#check_all_bounced").click(function () {
      $(".check_delete_bounced").prop('checked', $(this).prop('checked'))

      if ($('#check_all_bounced').prop('checked')) {
        $('#delete_all_bounced').show()
        $('#delete_all_bounced_complete').show()
      }
      else {
        $('#delete_all_bounced').hide()
        $('#delete_all_bounced_complete').hide()
      }
    });

    $('.check_delete_bounced').on('change', function () {
      // console.log('changed')
      if ($('.check_delete_bounced:checked').length > 1) {
        $('#delete_all_bounced').show()
      }
      else {
        $('#delete_all_bounced').hide()
      }
    })

    $('#delete_all_bounced_complete').click(function () {
      if (!confirm('Are you sure you want to delete all the {{bounced_contacts_list_count}} contacts ?')) {
        $('#check_all_bounced').prop('checked', false)
        $('.check_delete_bounced').prop('checked', false)
        $('#delete_all_bounced').hide()
        $('#delete_all_bounced_complete').hide()
        return;
      }
      {% comment %}
      window.location.href = "{% url 'marketing:delete_all_contacts' contact.id %}?bounced=true"
      {% endcomment %}
    })

    $('#delete_all_bounced').click(function (e) {
      e.preventDefault()
      if (!confirm('Are you sure you want to delete the selected contacts ?')) {
        $('#check_all_bounced').prop('checked', false)
        $('.check_delete_bounced').prop('checked', false)
        $('#delete_all_bounced').hide()
        $('#delete_all_bounced_complete').hide()
        return;
      }
      $('#delete_all_bounced').attr('disabled', 'disabled')
      var selected = [];
      $('.check_delete_bounced:checked').each(function () {
        selected.push($(this).attr('value'));
        // console.log(selected)
      });
      console.log(selected)
      $.ajax({
        url: "{% url 'marketing:delete_multiple_contacts' %}",
        type: 'POST',
        data: {
          'selected_list': selected,
          'from_contact': "{{contact_list.id}}",
        },
        success: function (data) {
          console.log(data)
          if (data['error'] === false) {
            window.location.reload()
          }
          else {
            $('#delete_all_bounced').removeAttr('disabled', 'disabled')
            alert(data['message'])
          }
        },
      });
    })



    // for duplicates

    $("#check_all_duplicate").click(function () {
      $(".check_delete_duplicate").prop('checked', $(this).prop('checked'))

      if ($('#check_all_duplicate').prop('checked')) {
        $('#delete_all_duplicate').show()
        $('#delete_all_complete_duplicate').show()
      }
      else {
        $('#delete_all_duplicate').hide()
        $('#delete_all_complete_duplicate').hide()
      }
    });

    $('.check_delete_duplicate').on('change', function () {
      // console.log('changed')
      if ($('.check_delete_duplicate:checked').length > 1) {
        $('#delete_all_duplicate').show()
      }
      else {
        $('#delete_all_duplicate').hide()
      }
    })

    $('#delete_all_complete_duplicate').click(function () {
      if (!confirm('Are you sure you want to delete all the {{duplicate_contacts.count}} contacts ?')) {
        $('#check_all_duplicate').prop('checked', false)
        $('.check_delete_duplicate').prop('checked', false)
        $('#delete_all_duplicate').hide()
        $('#delete_all_complete_duplicate').hide()
        return;
      }
      {% comment %}

      window.location.href = "{% url 'marketing:delete_all_contacts' contact.id %}?duplicate_contacts=true"
      {% endcomment %}
    })

    $('#delete_all_duplicate').click(function (e) {
      e.preventDefault()
      if (!confirm('Are you sure you want to delete the selected contacts ?')) {
        $('#check_all_duplicate').prop('checked', false)
        $('.check_delete_duplicate').prop('checked', false)
        $('#delete_all_duplicate').hide()
        $('#delete_all_complete_duplicate').hide()
        return;
      }
      $('#delete_all_duplicate').attr('disabled', 'disabled')
      var selected = [];
      $('.check_delete_duplicate:checked').each(function () {
        selected.push($(this).attr('value'));
        // console.log(selected)
      });
      console.log(selected)
      $.ajax({
        url: "{% url 'marketing:delete_multiple_contacts' %}",
        type: 'POST',
        data: {
          'selected_list': selected,
          'from_contact': "{{contact_list.id}}",
          'duplicate_contacts': "true"
        },
        success: function (data) {
          console.log(data)
          if (data['error'] === false) {
            window.location.reload()
          }
          else {
            $('#delete_all_bounced').removeAttr('disabled', 'disabled')
            alert(data['message'])
          }
        },
      });
    })


    // $(".remove_account").click(function (e) {
    //   e.preventDefault()
    //   url = $(this).attr('href')
    //   if (!confirm('Are you sure you want to delete?'))
    //     return;
    //   window.location = $(this).attr('href')
    // })

    $(".remove_account").click(function (e) {
      e.preventDefault()
      url = $(this).attr('href')
      var contact_lists = parseInt($(this).attr('data-other-contacts-lists'));
      if (contact_lists > 1) {
        if (!confirm('This contact exists in other contact lists too. Are you sure you want to delete this contact?'))
          return;
        window.location = $(this).attr('href');
      } else {
        if (!confirm('Are you sure you want to delete?'))
          return;
        window.location = $(this).attr('href');
      }
      // if (!confirm('Are you sure you want to delete?'))
      //   return;
      // window.location = $(this).attr('href');
    })

    $(".edit_contact").click(function (e) {
      e.preventDefault()
      url = $(this).attr('href')
      console.log(url)
      var contact_lists = parseInt($(this).attr('data-other-contacts-lists'));
      console.log(contact_lists);
      window.location = $(this).attr('href');
    })

    $("a[rel='page']").click(function (e) {
      e.preventDefault();
      $('#leads_filter').attr("action", $(this).attr("href"));
      $('#leads_filter').submit();
    });

    var queryParams = (window.location.search).replace('?', '').split('&').map(param => param.split('=')).reduce((values, [key, value]) => { values[key] = value; return values; }, {})

    if (!queryParams.hasOwnProperty('page') && queryParams.hasOwnProperty('bounced_contacts_page')) {
      $('#close-tab').trigger('click')
    }

    if (!queryParams.hasOwnProperty('page') && queryParams.hasOwnProperty('failed_contacts')) {
      $('#failed-contacts').trigger('click')
    }
    if (queryParams.hasOwnProperty('duplicate_contacts')) {
      $('#duplicate-contacts').trigger('click')
    }

  })
</script>
{% endblock js_block %}